<style scoped >
   /*订单撤销页面*/
   Button{
       border:0;
       background-color: inherit;
   }
   Button:hover{
       background-color: inherit;
       color: inherit;
   }
    /*撤销订单*/
    .revokeOrder{
        margin-right: 5px;
        color: #f81e1f;
    }
    .save Button{
        background: #37b3b3;
        color: #fff;
        margin-bottom: 16px;
        width: 152px;
    }
   .save Button:hover{background: #019ea3;}
   .ivu-select{
       width: 50%;
   }
    .revokebody .ivu-modal-body .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
</style>
<template>
    <div class="console-product">
        <!--头部-->
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">业务中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">订单撤销</span>
                </div>
            </i-col>
            <i-col  class="fr">
                <span>
                    <Button @click="revokeSave"><i class="iconfont revokeOrder">&#xe615;</i>订单撤销</Button>
                    <Modal class="revokebody" v-model="editRevokeModal" width="334" :mask-closable="false"  @on-cancel="close()">
                        <p slot="header" style="color: #eeebeb" v-drag>
                            <span>撤单登记</span>
                        </p>
                        <Form ref="editInvoice" :model="editRevoke" :rules="ruleddcx" label-position="left" :label-width="65">
                            <Row>
                                <i-col span="24">
                                    <Form-item label="订单编号:" prop="orderNo">
                                        <Input v-model="editRevoke.orderNo"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="负责人:" prop="username">
                                        <Input v-model="editRevoke.username"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="订单状态:" prop="orderstatus">
                                        <Select v-model="editRevoke.orderstatus">
                                            <Option v-for="item in status" :value="item.value" :key="item">{{ item.label }}</Option>
                                        </Select>
                                    </Form-item>
                                </i-col>
                            </Row>
                        </Form>
                        <p slot="footer" class="save">
                            <Button :loading="modal_loading" @click="revokeSubmit('editInvoice')">提交</Button>
                        </p>
                    </Modal>
                </span>
            </i-col>
        </Row>
        <!--头部结束-->
        <!--主体部分-->
        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <!--搜索-->
            <Form class="searchform" ref="revokeForm" :model="revokeForm" inline label-position="left">
                <Form-item label="订单号:" :label-width="50" style="width: 175px; ">
                    <Input v-model="revokeForm.orderNo" @on-enter="revokeSearch"></Input>
                </Form-item>
                <Form-item label="系统单号:" :label-width="65" style="width: 190px; ">
                    <Input v-model="revokeForm.sysCode" @on-enter="revokeSearch"></Input>
                </Form-item>
                <Form-item label="日期:" :label-width="35" style="width: 235px; ">
                    <Date-picker type="daterange" v-model="revokeForm.delDate"  format="yyyy-MM-dd" :options="creatDate0ptions" style="width: 200px"></Date-picker>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="revokeSearch">搜索</Button>
                </Form-item>
            </Form>
            <!--搜索结束-->
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" ref="revokeTable" stripe border :columns="revokeColumns" :data="revokeData" ></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,//加载
                //订单撤销搜索
                revokeForm:{
                    orderNo:'',
                    sysCode:'',
                    delDate:[new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()]
                },
                creatDate0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                //订单撤销数据
                revokeColumns:[
                    {
                        width:'8%',
                        title:'序号',
                        type:'index',
                    },
                    {
                        width:'16%',
                        title:'订单号',
                        key:'orderno',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.orderno,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.orderno)]);
                        }
                    },
                    {
                        width:'16%',
                        title:'系统单号',
                        key:'syscode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.syscode,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.syscode)]);
                        }
                    },
                    {
                        width:'16%',
                        title:'删除日期',
                        key:'deldate',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.deldate,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.deldate)]);
                        }
                    },
                    {
                        width:'14%',
                        title:'操作人员',
                        key:'username',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.username,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.username)]);
                        }
                    },
                    {
                        width:'20%',
                        title:'撤单原因',
                        key:'salesman',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.salesman,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.salesman)]);
                        }
                    }
                ],
                revokeData:[],
                //撤单登记
                editRevoke:{
                    orderNo:'',
                    username:'',
                    orderstatus:"10031"
                },
                ruleddcx:{
                    orderNo: [
                        { required: true, message: '请输入订单号', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入负责人', trigger: 'blur' }
                    ],
                },
                status:[
                    {
                        value: '10031',
                        label: '生产'
                    },
                    {
                        value: '10030',
                        label: '制版'
                    }
                ],
                editRevokeModal:false,
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize=20;
            }
            this.revokeData = this.revokeTableData(this.revokeForm,this.currentPage,this.pageSize);
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            revokeTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var orderno = formData.orderNo;//订单号
                var syscode = formData.sysCode;//系统单号
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.delDate.length != 0 && formData.delDate[0] != null){
                    var fromDateTime = (new Date(formData.delDate[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.delDate[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        orderno : orderno,
                        syscode : syscode,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/ordercancels',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.revokeData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            revokeSearch(){
                this.currentPage=1;
                this.revokeData = this.revokeTableData(this.revokeForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.revokeData = this.revokeTableData(this.revokeForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.revokeData = this.revokeTableData(this.revokeForm,this.currentPage,this.pageSize);
            },
            //撤单登记
            revokeSave(){
                this.editRevokeModal = true;
                this.modal_loading = false;
            },
            //提交订单
            revokeSubmit(name){
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if(valid){
                        axios.put('/ordercancels ', this.editRevoke).then(res => {
                            this.modal_loading = false;
                            this.editRevokeModal = false;
                            this.$Message.success('添加成功');
                            this.revokeData = this.revokeTableData(this.revokeForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                        });
                    }else{
                        this.modal_loading = false;
                    }
                });
            },
            //关闭重置
            close(){
                this.editRevoke={orderNo:'', username:'',orderstatus:'10031'};
                this.editRevokeModal = false
            }
        }
    }
</script>